<template>
	<el-dialog title="编辑角色" :visible.sync="update" width="30%" :before-close="handleClose">

		<el-form :rules="rules" ref="roleInfo">
			<table>
				<tr>
					<td>角色名称</td>
					<td>
						<el-form-item prop="roleName">
                        	<el-input>
                        		{{roleName}}
                        	</el-input>
                    	</el-form-item>
					</td>
				</tr>
				<tr>
					<td>角色描述</td>
					<td>
						<el-form-item prop="roleDesc">
                        	<el-input>
                        		{{roleDesc}}
                        	</el-input>
                    	</el-form-item>
					</td>
				</tr>
			</table>
		</el-form>

		<span slot="footer" class="dialog-footer">
		    <el-button @click="handleClose">取 消</el-button>
		    <el-button type="primary" @click="updateRoleInfo">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		props: ['update'],
		data() {
			return {
				
				rules: {
					roleName: [{
							required: true,
							message: '请输入角色名称',
							trigger: 'blur'
						},
						{
							min: 2,
							message: '名称最少两个字符',
							trigger: 'blur'
						}
					],
					roleDesc: [{
							required: true,
							message: '请输入角色描述',
							trigger: 'blur'
						},
						{
							min: 4,
							message: '描述不能少于4个字',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			handleClose() {
				this.$parent.update = false;
			},
			updateRoleInfo(){
				this.$refs['roleInfo'].validate((valid)=>{
					if(valid){
						
					}else{
						console.log("还有未验证通过的");
						return false;
					}
				})
			}
		}
	}
</script>

<style lang="scss">

</style>